<template>
  <div class="box-list" :class="[(index%2==0?'box-right':'box-left')]">
    <div class="box-content">
      <div class="box-title">{{articleItem.article_title}}
        <a :href="articleItem.article_url" v-if="articleItem.is_original==0" target="_blank"><img src="/static/images/zhuanzai.png" alt="" width="16"></a>
      </div>
      <div class="box-image mt10" v-if="articleItem.article_img" :style="{background:'url('+articleItem.article_img+') center/cover no-repeat',height:'200px'}">
        <div class="box-opacity"  @click="articleDetails(articleItem)"></div>
      </div>
      <div class="box-image mt10" v-else style="background:url('/static/images/timg.jpeg') center/cover no-repeat;height:250px">
        <div class="box-opacity" @click="articleDetails(articleItem)"></div>
      </div>
      <div class="box-desc">
        <em>{{articleItem.article_sign}}</em>
      </div>
      <div class="box-footer">
        <p>
          <span>{{articleItem.article_date}}</span>
          &nbsp;&nbsp;标签:&nbsp;&nbsp;
          <template v-for="(item,key) of tagList">
            <span class="box-tag" :key="key">{{item}}</span>
          </template>
        </p>
        <p>
          <a href="javascript:;"  @click="articleDetails(articleItem)">阅读更多</a>
        </p>
      </div>
      <div class="box-iconbox box-common-iconbox">
        <span class="box-round"></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    articleItem: {
      type: Object,
      default: {}
    },
    index: {
      type: Number,
      default: 1
    }
  },
  computed: {
    tagList() {
      return JSON.parse(this.articleItem.article_tag)
    }
  },
  methods: {
    articleDetails(item) {
      this.$router.push({ name: item.type_alias + 'Details', query: { article_id: item.article_id } })
    }
  },
}
</script>

<style scoped>
.box-title{
  padding: 10px;
  border-bottom: 2px solid #74b7fa;
  font-size: 16px;
  position: relative;
}
.box-title a{
  position: absolute;
  right: 0;
}
.box-list {
  width: 50%;
  min-width: 370px;
  border-radius: 5px;
  position: relative;
}
.box-left {
  float: left;
  clear: left;
}
.box-right {
  float: right;
  clear: right;
}
.box-content {
  background: #fff;
  margin: 2% 4%;
  padding: 2%;
  border-radius: 4px;
  /* position: relative; */
   /* box-shadow: #ccc 2px 2px 5px; */
}

.box-content {
  box-shadow: #ccc 2px 2px 5px;
}
.box-right .box-content {
  box-shadow: #ccc -2px 2px 5px;
}
.box-footer {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border-top: solid 1px #ddd;
  margin: 10px 0 0 0;
  padding: 10px 0 0 0;
  display: flex;
  justify-content: space-between;
}
.box-opacity {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  left: 0;
  top: 0;
  display: none;
  background: rgba(64, 158, 255, 0.5);
  cursor: pointer;
}
.box-image {
  position: relative;
}
.box-image:hover .box-opacity {
  display: block;
}
.box-left .box-content:after {
  content: "";
  position: absolute;
  right: 2.6%;
  top: 20px;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  z-index: 11;
  border-color: transparent transparent transparent #fff;
}

.box-right .box-content:after {
  content: "";
  position: absolute;
  left: 2.6%;
  top: 40px;
  border-style: solid;
  border-width: 10px 10px 10px 0px;
  z-index: 11;

  border-color: transparent #fff transparent transparent;
}
.box-common-iconbox {
  border-top: solid 1px #acb7c0;
  z-index: 10;
  position: absolute;
  width: 20px;
  height: 0px;
}
.box-left .box-iconbox {
  right: 0;
  top: 30px;
}
.box-right .box-iconbox {
  left: 0;
  top: 50px;
}

.box-round {
  display: inline-block;
  height: 8px;
  width: 8px;
  background: #fff;
  z-index: 99;
  border: solid 2px #acb7c0;
  position: absolute;
  border-radius: 50%;
}

.box-left .box-iconbox > span {
  right: -6px;
  top: -6px;
}
.box-right .box-iconbox > span {
  left: -6px;
  top: -6px;
}
.box-tag {
  background-color: rgba(64, 158, 255, 0.1);
  display: inline-block;
  padding: 2px 6px;
  font-size: 12px;
  color: #409eff;
  border-radius: 4px;
  margin: 0 2px;
  box-sizing: border-box;
  border: 1px solid rgba(64, 158, 255, 0.2);
  /* white-space: nowrap; */
}
</style>